<template>
<view>
	<view class="top">
		<view class="top_left" @click="dec(1)">
			<image src="/static/system/left.jpg" alt=""></image>
		</view>
		<view class="top_left" @click="dec(2)">
			<image src="/static/system/right.png" alt=""></image>
		</view>
	</view>
	<view class="top1">
		<view @click="select(1)" class="header_select border_right" :class="type == 1 ? 'border-bottom' : ''">当天预约</view>
		<view @click="select(2)" class="header_select border_right" :class="type == 2 ? 'border-bottom' : ''">昨日预约</view>
		<view @click="select(3)" class="header_select border_right" :class="type == 3 ? 'border-bottom' : ''">明日预约</view>
	</view>
	<view class="table">
		<view class="left">
			<view class="line">--</view>
			<view class="line" v-for="(item,index) in timeArr" :key="index">{{item}}</view>
		</view>
		<view class="right">
			<view class="right_th">
				<view class="right_line" v-for="(item,index) in userArr" :key="index">{{item.realname}}</view>
			</view>
			<view class="right_form">
				<view class="right_form_line" v-for="(item,index) in list" :key="index">
					<view :class="iitem.name ? '' : 'bgFalse'"
					class="right_form_td" v-for="(iitem,iindex) in item" :key="iindex"
					v-bind:style="{'line-height':iitem.height + 'rpx',height: iitem.height + 'rpx'}">
						{{iitem.name ? iitem.name : '可约'}}
					</view>
				</view>
			</view>
		</view>
	</view>
</view>
</template>
<script>
import request from '@/util/request.js'
export default {
	data() {
		return {
			timeArr:['9:00','9:30','10:00','10:30','11:00','11:30','12:00','12:30',
			'13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00',
			'17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00','21:30','22:00'],
			list:[],
			page:1,
			last_page:0,
			type:1,
			userArr:[]
		}
	},
	onLoad:function(){
		uni.showLoading({
			title:'加载中'
		})
		this.getList();
	},
	methods: {
		getList:function(){
			var data = {
				oa_id:uni.getStorageSync('oa_id'),
				page:this.page,
				type:this.type
			}
			var that = this
			request({
				url: '/manage/mark/time',
				method: 'get',
				data:data,
				success: (res) => {
					console.log(res.data.data.list)
					uni.hideLoading()
					if(!that.last_page){
						that.last_page = res.data.data.last_page
					}
					that.userArr = res.data.data.data
					that.list = res.data.data.list
				},
			})
		},
		dec:function(key){
			if(key == 1){//上一页
				if(this.page == 1){
					uni.showToast({
						title: '没有更多数据!!',
						icon: "none", 
						position:'bottom',
					});
					return;
				}else{
					this.page = this.page - 1;
				}
			}
			
			if(key == 2){//下一页
				if(this.page == this.last_page){
					uni.showToast({
						title: '没有更多数据!!',
						icon: "none", 
						position:'bottom',
					});
					return;
				}
				this.page = this.page + 1;
			}
			uni.showLoading({
				title:'加载中'
			})
			this.getList();
		},
		select:function(key){
			this.type = key
			uni.showLoading({
			    title: '加载中'  
			});
			this.page = 1;
			this.getList()
		},
	}
}
</script>
<style>
.top{
	display: flex;
	flex-direction: row;
	height:80rpx;
	line-height: 80rpx;
}
.top_left{
	width:50%;
	text-align: center;
}
.top_center{
	width:33%;
	background: #009900;
	text-align: center;
}
.top_right{
	width:50%;
	text-align: center;
}
.top image{
	width:200rpx;
	height:60rpx;
	margin-top:10rpx;
}
.top1{
    width:100%;
    height:80rpx;
    line-height: 80rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.header_select{
    width:33%;
    text-align: center;
    border-bottom:1px solid #b3b3b3;
	border-top:1px solid #b3b3b3;
}
.border_right{
    border-right:1px solid #b3b3b3;
}
.border-bottom{
    border-bottom: 3px solid red;
}
.table{
	width:100%;
	margin-top:20rpx;
	display: flex;
	flex-direction: row;
}
.left{
	width:25%;
}
.line{
	height:70rpx;
	line-height:70rpx;
	border:1rpx solid #CCCCCC;
	text-align: center;
}
.right{
	width:75%;
	display: flex;
	flex-direction: column;
}
.right_th{
	width:100%;
	display: flex;
	flex-direction: row;
}
.right_line{
	width:33%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	height:70rpx;
	line-height:70rpx;
	border:1rpx solid #CCCCCC;
}
.right_form{
	width:100%;
	display: flex;
	flex-direction: row;
}
.right_form_line{
	width:33%;
	display: flex;
	flex-direction: column;
}
.right_form_td{
	width:100%;
	border:1rpx solid #CCCCCC;
	height:70rpx;
	line-height:70rpx;
	text-align: center;
}
.bgFalse{
	background:#80ffbf;
}

</style>